<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">










<meta name="description" content="HTML默认字体大小14px1font-size: 14px; 检查边距123*&amp;#123; background: #000 !important;color: #0f0 !important;outline: solid #f00 1px !important; &amp;#125;  手机端、电脑端中CSS居中的多种方法预览案例预览案例下载地址 布局首先，让我们的背景宽和高都是100%123456h">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS之常用方法总结">
<meta property="og:url" content="http://yoursite.com/2020/12/07/CSS之常用方法总结/index.html">
<meta property="og:site_name" content="春风自是人间客">
<meta property="og:description" content="HTML默认字体大小14px1font-size: 14px; 检查边距123*&amp;#123; background: #000 !important;color: #0f0 !important;outline: solid #f00 1px !important; &amp;#125;  手机端、电脑端中CSS居中的多种方法预览案例预览案例下载地址 布局首先，让我们的背景宽和高都是100%123456h">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://wx1.sinaimg.cn/mw690/0069qZtTgy1gho4csuijuj306203qdfx.jpg">
<meta property="og:image" content="https://wx4.sinaimg.cn/mw690/0069qZtTgy1gho4c77d8dj30bj02odfq.jpg">
<meta property="og:image" content="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gho4b225hlj30k60ffn1c.jpg">
<meta property="og:image" content="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gidesq1po8j30970c4mxc.jpg">
<meta property="og:updated_time" content="2020-12-07T11:25:05.227Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS之常用方法总结">
<meta name="twitter:description" content="HTML默认字体大小14px1font-size: 14px; 检查边距123*&amp;#123; background: #000 !important;color: #0f0 !important;outline: solid #f00 1px !important; &amp;#125;  手机端、电脑端中CSS居中的多种方法预览案例预览案例下载地址 布局首先，让我们的背景宽和高都是100%123456h">
<meta name="twitter:image" content="https://wx1.sinaimg.cn/mw690/0069qZtTgy1gho4csuijuj306203qdfx.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: "",
      labels: ""
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2020/12/07/CSS之常用方法总结/">





  <title>CSS之常用方法总结 | 春风自是人间客</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">春风自是人间客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">是非成败转头空，青山依旧在，几度夕阳红。</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-program">
          <a href="/categories/program" rel="section">
            
            程序
          </a>
        </li>
      
        
        <li class="menu-item menu-item-reading">
          <a href="/categories/reading" rel="section">
            
            阅读
          </a>
        </li>
      
        
        <li class="menu-item menu-item-idea">
          <a href="/categories/idea" rel="section">
            
            想法
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
            关于我
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/12/07/CSS之常用方法总结/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="彭丹丹">
      <meta itemprop="description" content>
      <meta itemprop="image" content="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="春风自是人间客">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">CSS之常用方法总结</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-12-07T14:19:32+08:00">
                2020-12-07
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/program/" itemprop="url" rel="index">
                    <span itemprop="name">program</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  1,328
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  7
                </span>
              
            </div>
          

          
          
        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="HTML默认字体大小14px"><a href="#HTML默认字体大小14px" class="headerlink" title="HTML默认字体大小14px"></a>HTML默认字体大小14px</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">font-size: 14px;</span><br></pre></td></tr></table></figure>
<h1 id="检查边距"><a href="#检查边距" class="headerlink" title="检查边距"></a>检查边距</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">*&#123; background: #000 !important;</span><br><span class="line">color: #0f0 !important;</span><br><span class="line">outline: solid #f00 1px !important; &#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://wx1.sinaimg.cn/mw690/0069qZtTgy1gho4csuijuj306203qdfx.jpg" alt="a7b789a9gy1fow4hu8khhj206203qwea.jpg"></p>
<h1 id="手机端、电脑端中CSS居中的多种方法"><a href="#手机端、电脑端中CSS居中的多种方法" class="headerlink" title="手机端、电脑端中CSS居中的多种方法"></a>手机端、电脑端中CSS居中的多种方法</h1><h2 id="预览"><a href="#预览" class="headerlink" title="预览"></a>预览</h2><p><a href="https://firefly1984982452.github.io/css-center/" target="_blank" rel="noopener">案例预览</a><br><a href="https://github.com/firefly1984982452/css-center" target="_blank" rel="noopener">案例下载地址</a></p>
<h2 id="布局"><a href="#布局" class="headerlink" title="布局"></a>布局</h2><h3 id="首先，让我们的背景宽和高都是100"><a href="#首先，让我们的背景宽和高都是100" class="headerlink" title="首先，让我们的背景宽和高都是100%"></a>首先，让我们的背景宽和高都是100%</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">html,body&#123;</span><br><span class="line">	height: 100%;</span><br><span class="line">&#125;</span><br><span class="line">.box &#123;</span><br><span class="line">	height: 100%;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="html页面"><a href="#html页面" class="headerlink" title="html页面"></a>html页面</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;box&quot;&gt;</span><br><span class="line">	&lt;div class=&quot;item&quot;&gt;</span><br><span class="line">		item</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h3 id="基础的CSS"><a href="#基础的CSS" class="headerlink" title="基础的CSS"></a>基础的CSS</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">	margin: 0;</span><br><span class="line">	padding: 0;</span><br><span class="line">	box-sizing: border-box;</span><br><span class="line">&#125;</span><br><span class="line">html,body&#123;</span><br><span class="line">	height: 100%;</span><br><span class="line">&#125;</span><br><span class="line">.box &#123;</span><br><span class="line">	width: 100%;</span><br><span class="line">	height: 100%;</span><br><span class="line">	background-color: #f7b2bb;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.item &#123;</span><br><span class="line">	width: 50%;</span><br><span class="line">	height: 100px;</span><br><span class="line">	background-color: #1296db;</span><br><span class="line">	text-align: center;</span><br><span class="line">	line-height: 100px;</span><br><span class="line">	color: #fff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>tips:因为我的布局很简单，页面也不多，所以我用了<code>*</code>号选择器</strong></p>
<h2 id="absolute方法实现"><a href="#absolute方法实现" class="headerlink" title="absolute方法实现"></a>absolute方法实现</h2><h3 id="固定宽高"><a href="#固定宽高" class="headerlink" title="固定宽高"></a>固定宽高</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">	position: relative;</span><br><span class="line">&#125;</span><br><span class="line">.item&#123;</span><br><span class="line">	position: absolute;</span><br><span class="line">	width: 200px;</span><br><span class="line">	height: 100px;</span><br><span class="line">	left: 50%;</span><br><span class="line">	top: 50%;</span><br><span class="line">	margin-left: -100px;</span><br><span class="line">	margin-top: -50px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="百分比宽高"><a href="#百分比宽高" class="headerlink" title="百分比宽高"></a>百分比宽高</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">	position: relative;</span><br><span class="line">&#125;</span><br><span class="line">.item&#123;</span><br><span class="line">	width: 50%;</span><br><span class="line">	height: 20%;</span><br><span class="line">	position: absolute;</span><br><span class="line">	left: 50%;</span><br><span class="line">	top: 50%;</span><br><span class="line">	transform: translate(-50%,-50%);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>重点：<code>transform: translate(-50%,-50%);</code></strong></p>
<h2 id="块级元素实现水平居中"><a href="#块级元素实现水平居中" class="headerlink" title="块级元素实现水平居中"></a>块级元素实现水平居中</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">	position: relative;</span><br><span class="line">&#125;</span><br><span class="line">.item&#123;</span><br><span class="line">	width: 50%;</span><br><span class="line">	margin: 0 auto;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="flex方法实现"><a href="#flex方法实现" class="headerlink" title="flex方法实现"></a>flex方法实现</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">	display: flex;</span><br><span class="line">	justify-content: center;</span><br><span class="line">	align-items: center;</span><br><span class="line">&#125;</span><br><span class="line">.item&#123;</span><br><span class="line">	</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="文本居中"><a href="#文本居中" class="headerlink" title="文本居中"></a>文本居中</h2><ul>
<li><p>文字水平居中：<code>text-align:center;</code></p>
</li>
<li><p>文字垂直居中：<code>line-height:height</code></p>
</li>
</ul>
<h1 id="CSS做三角形"><a href="#CSS做三角形" class="headerlink" title="CSS做三角形"></a>CSS做三角形</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">width: 0;</span><br><span class="line">height: 0;</span><br><span class="line">border-color: #f60 transparent transparent transparent;</span><br><span class="line">border-style: solid;</span><br><span class="line">border-width: 10px;</span><br></pre></td></tr></table></figure>
<h1 id="width-100-自适应"><a href="#width-100-自适应" class="headerlink" title="width 100% 自适应"></a>width 100% 自适应</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">width: -webkit-fill-available;</span><br></pre></td></tr></table></figure>
<h1 id="雪碧图（sprite）"><a href="#雪碧图（sprite）" class="headerlink" title="雪碧图（sprite）"></a>雪碧图（sprite）</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">background: url(xxx) no-repeat;</span><br><span class="line">width: 64px;</span><br><span class="line">height: 64px;</span><br><span class="line">background-position: 0 -64px;</span><br></pre></td></tr></table></figure>
<h1 id="html自适应手机"><a href="#html自适应手机" class="headerlink" title="html自适应手机"></a>html自适应手机</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;</span><br></pre></td></tr></table></figure>
<h1 id="最后一个li不显示border（类推）"><a href="#最后一个li不显示border（类推）" class="headerlink" title="最后一个li不显示border（类推）"></a>最后一个li不显示border（类推）</h1><h2 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a>方法一</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">li&#123;border-top:1px solid #000;&#125;</span><br><span class="line">li:first-child&#123;border-top:none;&#125;</span><br></pre></td></tr></table></figure>
<h2 id="方法二"><a href="#方法二" class="headerlink" title="方法二"></a>方法二</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">li+li&#123;</span><br><span class="line">    border-top: 1px dashed #999;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="方法三"><a href="#方法三" class="headerlink" title="方法三"></a>方法三</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">li:not(:last-child)...</span><br></pre></td></tr></table></figure>
<h1 id="禁用左键"><a href="#禁用左键" class="headerlink" title="禁用左键"></a>禁用左键</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(document).ready(function()&#123;</span><br><span class="line">  $(document).bind(&apos;contextmenu&apos;, function(e)&#123;</span><br><span class="line">    return false;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h1 id="文字换行"><a href="#文字换行" class="headerlink" title="文字换行"></a>文字换行</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">word-wrap:break-word;</span><br></pre></td></tr></table></figure>
<h1 id="改变控制台面样式"><a href="#改变控制台面样式" class="headerlink" title="改变控制台面样式"></a>改变控制台面样式</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">console.log(&quot;%c来自:console&quot;,&quot;color:red;font-size:50px&quot;);</span><br></pre></td></tr></table></figure>
<p><img src="https://wx4.sinaimg.cn/mw690/0069qZtTgy1gho4c77d8dj30bj02odfq.jpg" alt="Image.png"></p>
<h1 id="css禁止鼠标点击"><a href="#css禁止鼠标点击" class="headerlink" title="css禁止鼠标点击"></a>css禁止鼠标点击</h1><p><code>pointer-events:none;</code></p>
<h1 id="限定N行"><a href="#限定N行" class="headerlink" title="限定N行"></a>限定N行</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">display: -webkit-box;</span><br><span class="line">overflow: hidden;</span><br><span class="line">white-space: normal!important;</span><br><span class="line">text-overflow: ellipsis;</span><br><span class="line">word-wrap: break-word;</span><br><span class="line">-webkit-line-clamp: 1;</span><br><span class="line">-webkit-box-orient: vertical;</span><br><span class="line"></span><br><span class="line">单行</span><br><span class="line">.table tbody &gt; tr &gt; td.name&#123;</span><br><span class="line">    overflow: hidden;</span><br><span class="line">    text-overflow: ellipsis;</span><br><span class="line">    white-space: nowrap;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<h1 id="新版本上线（指导蒙版）"><a href="#新版本上线（指导蒙版）" class="headerlink" title="新版本上线（指导蒙版）"></a>新版本上线（指导蒙版）</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">position: absolute;</span><br><span class="line">box-shadow: rgba(0, 0, 0, 0.75) 10px 1px 1px 99px;</span><br><span class="line">z-index: 100;</span><br><span class="line">width: 367px;</span><br><span class="line">height: 143px;</span><br><span class="line">left: 40px;</span><br><span class="line">top: 12px;</span><br></pre></td></tr></table></figure>
<p><img src="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gho4b225hlj30k60ffn1c.jpg" alt="Image.png"></p>
<h1 id="flex小记"><a href="#flex小记" class="headerlink" title="flex小记"></a>flex小记</h1><h2 id="规范"><a href="#规范" class="headerlink" title="规范"></a>规范</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;box&quot;&gt;</span><br><span class="line">  &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">  width: 400px;</span><br><span class="line">  height: 400px;</span><br><span class="line">  border: 1px solid #f7b2bb;</span><br><span class="line">  display: flex;</span><br><span class="line">  /*flex-direction: row;//方向</span><br><span class="line">  flex-wrap: wrap; //换行 */</span><br><span class="line">  flex-flow: row wrap;</span><br><span class="line">  justify-content: space-between;//内容</span><br><span class="line">  align-content: space-between;//</span><br><span class="line">&#125;</span><br><span class="line">.item&#123;</span><br><span class="line">  width: 100px;</span><br><span class="line">  height: 100px;</span><br><span class="line">  background: #f7b2bb;</span><br><span class="line">  color: #fff;</span><br><span class="line">  border: 1px solid #eee;</span><br><span class="line">  display: flex;</span><br><span class="line">  justify-content: space-around;</span><br><span class="line">  align-items: center;</span><br><span class="line">  /*flex-grow: 3;*/</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="flex中的space-evenly"><a href="#flex中的space-evenly" class="headerlink" title="flex中的space-evenly"></a>flex中的space-evenly</h1><p><strong>均匀分布</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">justify-content: space-between; // 两端</span><br><span class="line">justify-content: space-around; // 两端间隙相等，项目中间的间隙比较大</span><br><span class="line">justify-content: space-evenly; // 两端与项目中间的间隙一样大</span><br></pre></td></tr></table></figure>
<p>区别：</p>
<p><img src="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gidesq1po8j30970c4mxc.jpg" alt="image"></p>
<p><strong>IOS之类的兼容性用before和after</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">container&#123;</span><br><span class="line">      display: flex;</span><br><span class="line">      flex-flow: row nowrap;</span><br><span class="line">      align-items: center;</span><br><span class="line">      justify-content: space-between;</span><br><span class="line">       //justify-content: space-evenly;</span><br><span class="line">      &amp;:before,</span><br><span class="line">      &amp;:after &#123;</span><br><span class="line">          content: &apos;&apos;;</span><br><span class="line">          display: block;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="冒泡事件"><a href="#冒泡事件" class="headerlink" title="冒泡事件"></a>冒泡事件</h1><p><code>event.stopProgation</code>能阻止冒泡事件</p>
<h1 id="默认事件"><a href="#默认事件" class="headerlink" title="默认事件"></a>默认事件</h1><p><code>event.preventDefault</code>能阻止如<code>&lt;a&gt;</code>的默认<code>href</code>事件</p>
<h1 id="添加标签栏logo"><a href="#添加标签栏logo" class="headerlink" title="添加标签栏logo"></a>添加标签栏logo</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;./static/logo.ico&quot; rel=&quot;shortcut icon&quot; /&gt;</span><br></pre></td></tr></table></figure>
<p><em>tips:vue-cli项目中，要把.ico文件放在static文件中，并重新编译运行</em></p>
<h1 id="CSS让段落开头自动空两格代码"><a href="#CSS让段落开头自动空两格代码" class="headerlink" title="CSS让段落开头自动空两格代码"></a>CSS让段落开头自动空两格代码</h1><p><code>text-indent:2em;</code></p>
<h1 id="文字效果"><a href="#文字效果" class="headerlink" title="文字效果"></a>文字效果</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">text-decoration:none 无装饰，通常对html下划线标签去掉下划线样式</span><br><span class="line">text-decoration:underline 下划线样式</span><br><span class="line">text-decoration:line-through 删除线样式-贯穿线样式</span><br><span class="line">text-decoration:overline 上划线样式</span><br></pre></td></tr></table></figure>
<h1 id="禁止缓存"><a href="#禁止缓存" class="headerlink" title="禁止缓存"></a>禁止缓存</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--禁止缓存--&gt;</span><br><span class="line">&lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-cache, no-store, must-revalidate&quot; /&gt;</span><br><span class="line">&lt;meta http-equiv=&quot;Pragma&quot; content=&quot;no-cache&quot; /&gt;</span><br><span class="line">&lt;meta http-equiv=&quot;Expires&quot; content=&quot;0&quot; /&gt;</span><br><span class="line">&lt;!--禁止缓存 end--&gt;</span><br></pre></td></tr></table></figure>
<h1 id="打开下载后立马关闭"><a href="#打开下载后立马关闭" class="headerlink" title="打开下载后立马关闭"></a>打开下载后立马关闭</h1><ul>
<li>1.excel</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var adom = document.createElement(&quot;a&quot;);</span><br><span class="line">adom.setAttribute(&quot;href&quot;,url);</span><br><span class="line">adom.width = &quot;0px&quot;;</span><br><span class="line">adom.height = &quot;0px&quot;;</span><br><span class="line">adom.setAttribute(&quot;target&quot;,&quot;_blank&quot;)</span><br><span class="line">document.body.appendChild(adom)</span><br><span class="line">adom.click();</span><br><span class="line">adom.remove();</span><br></pre></td></tr></table></figure>
<ul>
<li>2.image</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">fetch(url).then(res =&gt; res.blob()).then((blob) =&gt; &#123;</span><br><span class="line">  // 创建隐藏的可下载链接</span><br><span class="line">  const a = document.createElement(&apos;a&apos;);</span><br><span class="line">  a.style.display = &apos;none&apos;;</span><br><span class="line">  a.href = URL.createObjectURL(blob);</span><br><span class="line">  a.download = this.peopleList[i].peopleName;</span><br><span class="line">  document.body.appendChild(a);</span><br><span class="line">  a.click();</span><br><span class="line">  // 移除元素</span><br><span class="line">  document.body.removeChild(a);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h1 id="base64转码"><a href="#base64转码" class="headerlink" title="base64转码"></a>base64转码</h1><h2 id="英文"><a href="#英文" class="headerlink" title="英文"></a>英文</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var string = &apos;Hello World!&apos;;</span><br><span class="line">btoa(string) // &quot;SGVsbG8gV29ybGQh&quot;</span><br><span class="line">atob(&apos;SGVsbG8gV29ybGQh&apos;) // &quot;Hello World!&quot;</span><br></pre></td></tr></table></figure>
<h2 id="中文"><a href="#中文" class="headerlink" title="中文"></a>中文</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">function b64Encode(str) &#123;</span><br><span class="line">  return btoa(encodeURIComponent(str));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function b64Decode(str) &#123;</span><br><span class="line">  return decodeURIComponent(atob(str));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">b64Encode(&apos;你好&apos;) // &quot;JUU0JUJEJUEwJUU1JUE1JUJE&quot;</span><br><span class="line">b64Decode(&apos;JUU0JUJEJUEwJUU1JUE1JUJE&apos;) // &quot;你好&quot;</span><br></pre></td></tr></table></figure>
<h1 id="js打印相关"><a href="#js打印相关" class="headerlink" title="js打印相关"></a>js打印相关</h1><h2 id="打印方法"><a href="#打印方法" class="headerlink" title="打印方法"></a>打印方法</h2><p><code>window.print();</code></p>
<h2 id="局部打印"><a href="#局部打印" class="headerlink" title="局部打印"></a>局部打印</h2><h3 id="media属性"><a href="#media属性" class="headerlink" title="media属性"></a>media属性</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;style type=&quot;text/css&quot; media=print&gt;</span><br><span class="line">	.noprint &#123;</span><br><span class="line">		display: none</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>在正常的html文件中有效，但我试了在vue中无效</li>
</ul>
<h3 id="媒体查询"><a href="#媒体查询" class="headerlink" title="媒体查询"></a>媒体查询</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;style type=&quot;text/css&quot;&gt;</span><br><span class="line">	@media print &#123;</span><br><span class="line">		.no&#123;</span><br><span class="line">			display: none;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>亲测有效</li>
</ul>
<h1 id="更改自带的scorll滚动条样式"><a href="#更改自带的scorll滚动条样式" class="headerlink" title="更改自带的scorll滚动条样式"></a>更改自带的scorll滚动条样式</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">::-webkit-scrollbar&#123;</span><br><span class="line">    width: .07rem;</span><br><span class="line">    height: .07rem;</span><br><span class="line">&#125;</span><br><span class="line">/* //定义滑块 内阴影+圆角 */</span><br><span class="line">::-webkit-scrollbar-thumb&#123;</span><br><span class="line">    border-radius: 1em;</span><br><span class="line">    background-color: #D8D8D8;</span><br><span class="line">&#125;</span><br><span class="line">/* //定义滚动条轨道 内阴影+圆角 */</span><br><span class="line">::-webkit-scrollbar-track&#123;</span><br><span class="line">    border-radius: 1em;</span><br><span class="line">    background-color: transparent;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/12/07/CSS之进阶总结/" rel="next" title="CSS之进阶总结">
                <i class="fa fa-chevron-left"></i> CSS之进阶总结
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/12/07/JavaScript之面向对象/" rel="prev" title="JavaScript之面向对象">
                JavaScript之面向对象 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zODk2OC8xNTQ5Ng=="></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="彭丹丹">
            
              <p class="site-author-name" itemprop="name">彭丹丹</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">183</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#HTML默认字体大小14px"><span class="nav-number">1.</span> <span class="nav-text">HTML默认字体大小14px</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#检查边距"><span class="nav-number">2.</span> <span class="nav-text">检查边距</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#手机端、电脑端中CSS居中的多种方法"><span class="nav-number">3.</span> <span class="nav-text">手机端、电脑端中CSS居中的多种方法</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#预览"><span class="nav-number">3.1.</span> <span class="nav-text">预览</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#布局"><span class="nav-number">3.2.</span> <span class="nav-text">布局</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#首先，让我们的背景宽和高都是100"><span class="nav-number">3.2.1.</span> <span class="nav-text">首先，让我们的背景宽和高都是100%</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#html页面"><span class="nav-number">3.2.2.</span> <span class="nav-text">html页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#基础的CSS"><span class="nav-number">3.2.3.</span> <span class="nav-text">基础的CSS</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#absolute方法实现"><span class="nav-number">3.3.</span> <span class="nav-text">absolute方法实现</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#固定宽高"><span class="nav-number">3.3.1.</span> <span class="nav-text">固定宽高</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#百分比宽高"><span class="nav-number">3.3.2.</span> <span class="nav-text">百分比宽高</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#块级元素实现水平居中"><span class="nav-number">3.4.</span> <span class="nav-text">块级元素实现水平居中</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#flex方法实现"><span class="nav-number">3.5.</span> <span class="nav-text">flex方法实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#文本居中"><span class="nav-number">3.6.</span> <span class="nav-text">文本居中</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS做三角形"><span class="nav-number">4.</span> <span class="nav-text">CSS做三角形</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#width-100-自适应"><span class="nav-number">5.</span> <span class="nav-text">width 100% 自适应</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#雪碧图（sprite）"><span class="nav-number">6.</span> <span class="nav-text">雪碧图（sprite）</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#html自适应手机"><span class="nav-number">7.</span> <span class="nav-text">html自适应手机</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#最后一个li不显示border（类推）"><span class="nav-number">8.</span> <span class="nav-text">最后一个li不显示border（类推）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#方法一"><span class="nav-number">8.1.</span> <span class="nav-text">方法一</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#方法二"><span class="nav-number">8.2.</span> <span class="nav-text">方法二</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#方法三"><span class="nav-number">8.3.</span> <span class="nav-text">方法三</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#禁用左键"><span class="nav-number">9.</span> <span class="nav-text">禁用左键</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#文字换行"><span class="nav-number">10.</span> <span class="nav-text">文字换行</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#改变控制台面样式"><span class="nav-number">11.</span> <span class="nav-text">改变控制台面样式</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#css禁止鼠标点击"><span class="nav-number">12.</span> <span class="nav-text">css禁止鼠标点击</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#限定N行"><span class="nav-number">13.</span> <span class="nav-text">限定N行</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#新版本上线（指导蒙版）"><span class="nav-number">14.</span> <span class="nav-text">新版本上线（指导蒙版）</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#flex小记"><span class="nav-number">15.</span> <span class="nav-text">flex小记</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#规范"><span class="nav-number">15.1.</span> <span class="nav-text">规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#示例"><span class="nav-number">15.2.</span> <span class="nav-text">示例</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#flex中的space-evenly"><span class="nav-number">16.</span> <span class="nav-text">flex中的space-evenly</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#冒泡事件"><span class="nav-number">17.</span> <span class="nav-text">冒泡事件</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#默认事件"><span class="nav-number">18.</span> <span class="nav-text">默认事件</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#添加标签栏logo"><span class="nav-number">19.</span> <span class="nav-text">添加标签栏logo</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS让段落开头自动空两格代码"><span class="nav-number">20.</span> <span class="nav-text">CSS让段落开头自动空两格代码</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#文字效果"><span class="nav-number">21.</span> <span class="nav-text">文字效果</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#禁止缓存"><span class="nav-number">22.</span> <span class="nav-text">禁止缓存</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#打开下载后立马关闭"><span class="nav-number">23.</span> <span class="nav-text">打开下载后立马关闭</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#base64转码"><span class="nav-number">24.</span> <span class="nav-text">base64转码</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#英文"><span class="nav-number">24.1.</span> <span class="nav-text">英文</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#中文"><span class="nav-number">24.2.</span> <span class="nav-text">中文</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#js打印相关"><span class="nav-number">25.</span> <span class="nav-text">js打印相关</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#打印方法"><span class="nav-number">25.1.</span> <span class="nav-text">打印方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#局部打印"><span class="nav-number">25.2.</span> <span class="nav-text">局部打印</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#media属性"><span class="nav-number">25.2.1.</span> <span class="nav-text">media属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#媒体查询"><span class="nav-number">25.2.2.</span> <span class="nav-text">媒体查询</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#更改自带的scorll滚动条样式"><span class="nav-number">26.</span> <span class="nav-text">更改自带的scorll滚动条样式</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">彭丹丹</span>

  
</div>


	<div class="powered-by">
	<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
	  本站访客数:<span id="busuanzi_value_site_uv"></span>
	</span>
	</div>
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  












  





  

  

  

  
  

  

  

  

  undefined
  
  <!-- 页面爆炸效果 -->
  
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true}});</script></body>
</html>
